<template>
  <div class="container drag">
    <header>
      <span class="title">添加朋友</span>
    </header>
    <div class="main no-drag">
      <div class="search-container">
        <yd-search v-model.trim="searchKey" tips="搜索微信号或者手机号" ></yd-search>
        <el-button class="btn" type="success" @click="handleSearch">搜索</el-button>
      </div>


      <div class="content" v-if="contactDetail">
        <contact-info  :contactDetail="contactDetail"></contact-info>
      </div>
      <div v-else style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;color: rgb(158, 158, 158);font-size: 12px;">
        {{tips}}
      </div>
    </div>

  </div>
</template>

<script setup>
import ydSearch from '@/components/search/input/index.vue';
import contactInfo from '@/components/user/info/index.vue'
import { onBeforeMount, ref } from 'vue'
import { searchUser } from '@/api/user'

import {useUserStore} from '@/stores/user'
const userStore = useUserStore()

onBeforeMount(async () => {
  if (!userStore.email) {
    await userStore.userInfo()
  }
})


const searchKey = ref('')
const tips = ref('')

// 点击搜索时
const handleSearch = () => {
  tips.value = ''
  if (searchKey.value) {
    searchUser(searchKey.value).then(res => {
      if (res.code === 200) {
        if (res.data) {
          console.log('朋友？' ,res.data.friend)
          if (res.data.email === userStore.email || !res.data.friend) {
            window.ipcRenderer.send('window-resize' , {width: 330 , height: 455})
          } else {
            window.ipcRenderer.send('window-resize' , {width: 330 , height: 555})
          }
          contactDetail.value = res.data
        } else {
          window.ipcRenderer.send('window-resize' , {width: 330 , height: 455})
          tips.value = '无法找到该用户，请检查你填写的账号是否正确。'
          contactDetail.value = null
        }
      }
    })
  }

}

const contactDetail = ref( null
//   {
//   id: 1,
//   gender: 1,
//   avatar: 'https://img.tuxiangyan.com/zb_users/upload/2023/02/202302091675904133489339.jpg',
//   nickname: 'A-',
//   weChatCode:'Zik-J_0522',
//   areaName: '山东 青岛',
//   remark: '租房',
//   permission: '不让他（她）看朋友圈和状态',
//   friendCircle: [
//     'https://ts1.tc.mm.bing.net/th/id/OIP-C.3nrDn8IrD3x5iVX0PI6cDgHaLH?w=160&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
//     'https://ts1.tc.mm.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=255&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
//   ],
//   videoAccount: [
//     'https://ts1.tc.mm.bing.net/th/id/OIP-C.3nrDn8IrD3x5iVX0PI6cDgHaLH?w=160&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
//     'https://ts1.tc.mm.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo?w=255&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
//   ],
//   commonGroupNumber: 1,
//   personalSignature: '忘记烦恼.',
//   source:'通过名片分享添加'
// }
)

</script>


<style scoped lang="less">
.container {
  color: black;
  background-color: rgb(247, 247, 247);
  padding: 10px;
  display: flex;
  flex-direction: column;

  header {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;

    .title {
      font-size: 16px;
      text-align: center;
    }

  }


  .main {
    padding: 10px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .search-container {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn {
        background-color: rgb(7, 193, 96);
        height: 35px;
      }

    }

    .content {
      margin-top: 20px;
      border-radius: 5px;
      background-color: white;
      flex: 1;
    }

  }


}
</style>
